.single_card_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  .card {
    height: 400px;
    // width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
  }
  .letter_wrapper {
    display: flex;
    justify-content: center;
  }
  .dictation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    width: 500px;
    height: 30px;
  }
  .desc {
    margin-top: 10px;
    font-size: 18px;
    color: #333;
  }
}
.right {
  color: #297DB7;
}
.wrong {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  color: red;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
